<template>
	<view>
		<view class="addBtn" @click="addAdress">
			点击新增收获地址
		</view>
		<view class="address" v-for="(item,index) in addressList">
			<view class="hd" >
				<view class="hdIcon">
					<radio value="r1" @click="changeDefault(item.id)" :checked="item.isDefault" color="#8DC7DF" style="transform:scale(0.7)"/>
				</view>
				<view class="hd_title">
					修改为默认地址
				</view>
				<view class="editIcon" @click="editAddress(item.id)">
					<image src="../../static/icons/edit.png" mode=""></image>
				</view>
			</view>
			<view class="content">
				<view class="addressInfo">
					<image src="../../static/icons/addressIcon.png" mode=""></image>
					<view class="main">{{item.province+item.city+item.area}}</view>
				</view>
				<view class="addressDetail">
					{{item.detailAddress}}
				</view>
			</view>
			<view class="userInfo">
				<view class="userName">
					{{item.name}}
				</view>
				<view class="userTel">
					{{item.phone}}
				</view>
				<view class="deleteIcon" @click="removeAddress(item.id)">
					<image src="../../static/icons/delete.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
		<view class="mask"  v-if="formVisible">
			<view class="addressForm">
				<view class="cancelBtn" @click="cancel">
					返回
				</view>
				<uni-forms :modelValue="formData" ref="form" validate-trigger="bind">
					<uni-forms-item label="收货人姓名:" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="收货人电话:" name="phone">
						<uni-easyinput type="text"  v-model="formData.phone" placeholder="请输入电话号码" />
					</uni-forms-item>
					<uni-forms-item label="所在地址:" name="city">
						<picker @change="changeRegin" mode = "region" :value="region">
						    <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
						  </picker>
					</uni-forms-item>
					<uni-forms-item label="详细地址:" name="detailAddress">
						<!-- <uni-easyinput type="text" v-model="formData.detailAddress" placeholder="请输入详细地址"/> -->
						<textarea cols="30" rows="2" class="detailAddress" v-model="formData.detailAddress" placeholder="请输入详细地址"></textarea>
					</uni-forms-item>
					<uni-forms-item label="设为默认" name="default">
						<view class="defaultBtn">
							<radio color="#8DC7DF" :checked="isDefault" @click="formData.isDefault=!formData.isDefault" style="transform:scale(0.7)"/>
						</view>
					</uni-forms-item>
					<button class="saveBtn" @click="saveAddress">保存</button>
					
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAddress,addAddress,updateAddress,removeAddress,setDefaultAddress} from '@/api/address.js'
	import { nextTick } from 'vue';
	export default {
		data() {
			return {
				// isDefault:false,
				formVisible:false,
				region:[],
				formData:{
					name:'',
					phone:'',
					province:'',
					city:'',
					area:'',
					// street:'',
					detailAddress:'',
					isDefault:1
				},
				addressList:[],
				rules: {
						name:{
							rules: [{
									required: true,
									errorMessage: '名字不能为空',
								},{
									validateFunction:function(rule,value,data,callback){
										if (value.length>20) {
											callback('名字长度不能超过20位')
										}else if(value.length<1){
											callback('名字不能为空')
										}
										return true
									}
								}]
							
						},
				        phone: {
				             rules: [{
				                 required: true,
				                 errorMessage: '请输入电话号码'
				             }, {
				                 validateFunction: (rule, value, data, callback) => {
									 let phone = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
									
				                 // 异步需要返回 Promise 对象
				                     return new Promise((resolve, reject) => {
				                         setTimeout(() => {
				                             if (!phone.test(value) && value !== '') {
				                                 reject(new Error('请输入正确电话号码格式'))
				                             } else {
				                                 resolve()
				                             }
				                         }, 100)
				                     })
				                 }
				             }]
				        },
					},
				
			}
		},
		onLoad(){
			this.getAddressList()
		},
		methods:{
			// 修改默认地址
			changeDefault(id){
				setDefaultAddress(id).then(res=>{
					uni.redirectTo({
					    url: '/pages/address/address'
					})
				})
			},
			// 新增收货地址按钮的回调
			addAdress(){
				Object.assign(this.formData,{
					id:'',
					name:'',
					phone:'',
					province:'',
					city:'',
					area:'',
					detailAddress:'',
					isDefault:0
				})
				this.region=[]
				this.formVisible=true;
				nextTick(()=>{
					this.$refs.form.setRules(this.rules);
				})
			},
			// 选择省-市-区
			changeRegin(e){
				this.region=e.detail.value
				console.log(e.detail.value)
			},
			// 新增/修改收货地址
			saveAddress(){
				this.formData.province=this.region[0];
				this.formData.city=this.region[1];
				this.formData.area=this.region[2];
				console.log(this.formData)
				this.$refs.form.validate().then(res=>{
					if(this.formData.id){
						updateAddress(this.formData).then(res=>{
							uni.redirectTo({
							    url: '/pages/address/address'
							})
							this.getAddressList()
							this.formVisible=false
						})
					}else{
						let addParams=this.formData
						Reflect.deleteProperty(addParams, 'id')
						addAddress(addParams).then(res=>{
							if(res.data.code==200){
								this.formVisible=false
								uni.redirectTo({
								    url: '/pages/address/address'
								})
							}
						})
					}
					
					
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			
			},
			// 获取全部收货地址
			getAddressList() {
				getAddress().then(res => {
					this.addressList = res.data.data;
					console.log('已获取到当前地址')
				})
			},
			// 返回按钮
			cancel(){
				this.formVisible=false
			},
			// 编辑修改已有收货地址
			editAddress(id){
				const chooseAddress=this.addressList.find(item=>{
					return item.id=id
				})
				// const chooseAddress=this.addressList[id]
				console.log(chooseAddress);
				Object.assign(this.formData,{
					id:chooseAddress.id,
					name:chooseAddress.name,
					phone:chooseAddress.phone,
					province:chooseAddress.province,
					city:chooseAddress.city,
					area:chooseAddress.area,
					// street:'',
					detailAddress:chooseAddress.detailAddress,
					isDefault:chooseAddress.isDefault
				})
				this.region[0]=chooseAddress.province
				this.region[1]=chooseAddress.city
				this.region[2]=chooseAddress.area
				this.formVisible=true
			},
			// 删除收货地址
			removeAddress(id){
				removeAddress(id).then(res=>{
					uni.redirectTo({
					    url: '/pages/address/address'
					})
					
				})
			},
			
		}
	}
</script>

<style lang="scss">
.address{
	width: 90%;
	margin: 10px auto;
	box-shadow: 0 0 10rpx 1rpx #e9e9e9;
	border-radius: 15px;
	font-size: 30rpx;
	padding: 20rpx;
	.hd{
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		.hd_title{
			font-size: 24rpx;
			color:#2d4149;
		}
		.editIcon{
			position: absolute;
			right: 20rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
		.addressInfo{
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}
		}
		.addressDetail{
			font-size: 36rpx;
			font-weight: 600;
			margin-left: 66rpx;
		}
	}
	.userInfo{
		position: relative;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		margin-left: 40rpx;
		.userName{
			margin: 0 30rpx;
		}
		.deleteIcon{
			position: absolute;
			right: 30rpx;
			bottom: 4rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
.addBtn{
	width: 94%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	border: 1px dotted #89C3DB;
	text-align: center;
	color: #8DC7DF;
	background-color: #f6fcfd;
	margin: 10px auto;
}
.mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 9999;
	.addressForm{
		position: fixed;
		top: 20%;
		left: 8%;
		width: 70%;
		height: 60%;
		padding: 40rpx;
		border-radius: 15px;
		background-color: #fff;
		.detailAddress{
			width: 280rpx;
			height: 80rpx;
			background-color: #f7f7f7;
			border-radius: 30rpx;
			padding: 30rpx;
			font-size: 28rpx;
		}
		.defaultBtn{
			position: absolute;
			top: -20rpx;
			right: 20rpx;
		}
		.saveBtn{
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			background-color: #8DC7DF;
			border-radius: 30rpx;
		}
		.cancelBtn{
			float: right;
			color: #8DC7DF;
			font-size: 32rpx;
		}
	}
}
.is-input-border{
	border: none!important;
}
.uni-easyinput__content{
	background-color: #f7f7f7!important;
}
.uni-easyinput__content-input{
	height: 60rpx!important;
	line-height: 60rpx!important;
	font-size: 26rpx!important;
}
.tui-picker-detail{
	font-size: 26rpx!important;
}
</style>
